<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计器--转换</title>
    <link rel="stylesheet" type="text/css" href="../jquery/jquery-ui/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/icon.css"/>
    <link rel="stylesheet" type="text/css" href="css/designer.css"/>
    <script type="text/javascript" src="../jquery/jquery.js"></script>
    <script type="text/javascript" src="../jquery/jquery-ui/jquery-ui.js"></script>
    <script type="text/javascript" src="../jquery/jsPlumb.js"></script>

    <script type="text/javascript" src="./designer.js"></script>

    <script>
        $(function () {
            $('#designerMenuTabs').tabs();
            $('.designerMenuAccordion').accordion({heightStyle:'fill'});
            // $('.designer-menu').designermenu({});
        });

    </script>
    <style>
        .step-draggable1{
            width: 80px;
            height: 80px;
            margin-top: 150px;
            position: absolute;
            border: #ed4014 1px solid;
        }
    </style>
</head>
<body style="width: 97%;margin: 10px auto;">
<div id="designerMenuTabs" class="designer-left">
    <ul>
        <li><a href="designerMenuTabs1">核心组件</a></li>
    </ul>
    <div id="designerMenuTabs1">
        <div class="designerMenuAccordion" data-options="border:false,fit:true">
            <h3>输入</h3>
            <div id="mm" class="designer-menu" data-options="menuTitle:'json解析',stepType:'jsonparse',classify:'menuRead',iconCls:'designer-menu-jsonparse'"></div>
            <h3>转换</h3>
            <div class="designer-menu" data-options="menuTitle:'字段选择',stepType:'choicecol',classify:'menuTrans'"></div>
            <div class="designer-menu" data-options="menuTitle:'过滤记录',stepType:'datafilter',classify:'menuTrans'"></div>
            <h3>输出</h3>
            <div class="designer-menu" data-options="menuTitle:'输出文本文件',stepType:'writetxt',classify:'menuWrite'"></div>



        </div>
    </div>
<!--    <div class="easyui-panel" data-options="title:'核心组件',width: 180,height: 450"></div>-->
</div>

<!--
<div class="designer-main">
    <div id="designerDesign" class="easyui-droppable" data-options="accept:'.editor-draggable'" style="width: 100%; height: 100%">
        &lt;!&ndash;editor&ndash;&gt;
        <div id="ss1" class="editor-draggable" data-options="stepType:'jsonparse',stepTitle:'json解析',stepId:'step1',left:240,top:50">
        </div>
        <div id="ss2" class="editor-draggable" data-options="stepType:'choicecol',stepTitle:'字段选中',stepId:'step1',left:440,top:50">
        </div>
    </div>

</div>
-->

</body>

<script>
    $('.step-draggable').designerstep({
        onEndDrag: function (event) {
            console.log(this)
            console.log($(this).offset())
            // jsPlumb.connect({source:'ss1',target:'ss1',endpoint:'Dot',connector:'Flowchart',overlay:'Arrow'})

        }
    });

    var jsPlumbCommon={

        maxConnections: 1,//端点最多拉出线条数 n , -1不限制
        grid:[10,10], //网格对齐= 每次移动固定的尺寸
        //containment可拖动区域 parent selector,需要jqueryUI支持
        containment:'#designerDesign',
        paintStyle: {  outlineStroke: 'blue',stroke: 'lightgray', strokeWidth: 1 },
        hoverPaintStyle: {
            outlineStroke: 'lightblue', strokeWidth: 2
        },
        //anchors锚点 Static 静态 固定位置的锚点;Dynamic jsPlumb自动选择合适的锚点，动态锚点;Perimeter 边缘锚点，会根据节点形状去改变位置;Continuous 根据节点位置，自动调整位置的锚点
        anchors: ['Right', 'Left', 'Bottom', 'Top',
            // 'TopCenter', 'TopRight', 'TopLeft',  'RightMiddle',
            // 'BottomCenter', 'BottomRight', 'BottomLeft',  'LeftMiddle'
        ],
        isSource: true,
        isTarget: true,
        //endpoint端点:  Dot圆点,Rectangle矩形,Image图像,Blank空白
        endpoint:'Dot',
        endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 1 },

        //connector 连接线     Bezier 贝塞尔曲线,Straight 直线,Flowchart 90度转角线,StateMachine 状态机
        connector:['Flowchart'],
        connectorStyle: {
            outlineStroke: 'green',
            strokeWidth: 1
        },
        connectorHoverStyle: {
            strokeWidth: 2
        },

    };
    jsPlumb.ready(function () {
        jsPlumb.setContainer('diagramContainer')
        /*jsPlumb.connect({source:$('#ss1'),target:$('#ss2'),overlays:[
                ['Arrow', { width: 12, length: 12, location: 0.5 }],
                ['Arrow', { width: 12, length: 12, location: 0.8 }],
            ],
            },jsPlumbCommon);*/
        $('.step-draggable').each((i,item)=>{
            //设置拖动
            jsPlumb.draggable(item)
            jsPlumb.addEndpoint(item,{anchors:['Right']},jsPlumbCommon)
            jsPlumb.addEndpoint(item,{anchors:['Left']},jsPlumbCommon)
            jsPlumb.addEndpoint(item,{anchors:['Bottom']},jsPlumbCommon)
            jsPlumb.addEndpoint(item,{anchors:['Top']},jsPlumbCommon)


            jsPlumb.bind("connection", function(info, originalEvent) {
                console.log('拖动事件- connection')
            });
            jsPlumb.bind("click", function(info, originalEvent) {
                console.log(originalEvent)
                console.log(this)
                console.log('click')
                jsPlumb.remove(originalEvent)
            });
            jsPlumb.bind("dbclick", function(info, originalEvent) {
                console.log('dbclick')

            });
            /*jsPlumb Events列表
                      connection
                      connectionDetached
                      connectionMoved
                      click
                      dblclick
                      endpointClick
                      endpointDblClick
                      contextmenu
                      beforeDrop
                      beforeDetach
                      zoom
                      Connection Events
                      Endpoint Events
                      Overlay Events
                      Unbinding Events*/
            /*               jsPlumb.addEndpoint('item_left', {
                               anchors: ['Right'],
                               uuid: 'fromId'
                           })

                           jsPlumb.addEndpoint('item_right', {
                               anchors: ['Left'],
                               uuid: 'toId'
                           })

                           console.log('3 秒后建立连线')
                           setTimeout(function () {
                               jsPlumb.connect({ uuids: ['fromId', 'toId'] })
                           }, 3000)*/

            // 当连接建立前
            /*             jsPlumb.bind('beforeDrop', function (info) {
                             var a = 10
                             var b = 2
                             if (a < b) {
                                 console.log('连接会自动建立')
                                 return true // 连接会自动建立
                             } else {
                                 console.log('连接取消')
                                 return false // 连接不会建立，注意，必须是false
                             }
                         })*/
        })
    })
    $(function () {


    });

    var jsPlumbSetting= {
        // Container: "main",
        anchors: ['Right', 'Left', 'Bottom', 'Top',
            'TopCenter', 'TopRight', 'TopLeft',  'RightMiddle',
            'BottomCenter', 'BottomRight', 'BottomLeft',  'LeftMiddle'
        ],
        // RenderMode: 'svg',
    };
    /*var commonLink= {
        endpoint: ["Dot", {
            radius: 5
        }], //端点的形状
        isSource: true,
        isTarget: true,
        // 连线的样式 StateMachine、Flowchart，Bezier、Straight
        connector: ['Flowchart', {
            stub: [40, 60],
            gap: 10,
            cornerRadius: 5,
            alwaysRespectStubs: true
        }],
        maxConnections: -1, // 设置连接点最多可以连接几条线
        paintStyle: paintStyle,
        hoverPaintStyle: hoverPaintStyle,
        connectorStyle: connectorPaintStyle,
        connectorHoverStyle: connectorHoverStyle,
        connectorOverlays: [
            ["Arrow", {
                width: 10,
                length: 20,
                location: 1,
                id: "arrow"
            }],

            ["Custom", {
                create: function(component) {
                    return $(
                        '<div></div>'
                    );
                    //此处可以设置连接线上增加html 在次衍生 追加一个输入框 点击输入框维护文字等
                    // return $(
                    // 	'<div style="width: 30px;height: 20px;backGround: #f1f1f2;border: solid 1px solid #DDD;' +
                    // 	'color: #FF1E10;font-weight: bold;border-radius: 2px; text-align:center;line-height:20px">X</div>'
                    // );
                },
                location: 0.5,
                id: "customOverlay",
            }]
        ],
    };*/

    // jsPlumb.ready(function () {
    //     let jsPlumbInstance = jsPlumb.getInstance();
    //     // 导入准备好的jsPlumb配置
    //     jsPlumbInstance.importDefaults(this.jsPlumbSetting);
    //
    //     jsPlumbInstance.connect({source:'ss1',target:'ss2'},jsPlumbSetting);
    //     // jsPlumb.addEndpoint('ss1',{anchor:['Right','Left']})
    //     jsPlumbInstance.draggable('ss1')
    //     jsPlumbInstance.draggable('ss2')
    // })
</script>
<!---->
<script>

    function tooltipInit(){
        $('.designer-step-tool').tooltip({
            content: '<div class="designer-step-opt" >\n' +
                '            <div class="designer-step-opt-title">操作面板</div>' +
                '            <div class="designer-step-opt-main">' +
                '                   <span class="designer-step-opt-btn">' +
                '                        <span class="designer-step-opt-btn-icon designer-step-opt-from"></span>' +
                '                    </span>\n' +
                '                    <span class="designer-step-opt-btn">' +
                '                        <span class="designer-step-opt-btn-icon designer-step-opt-edit"></span>' +
                '                    </span>\n' +
                '                    <span class="designer-step-opt-btn">' +
                '                        <span class="designer-step-opt-btn-icon designer-step-opt-setting"></span>' +
                '                    </span>\n' +
                '                    <span class="designer-step-opt-btn">' +
                '                        <span class="designer-step-opt-btn-icon designer-step-opt-to"></span>' +
                '                    </span>                '+
                '            </div>' +
                '        </div>',
            position: 'bottom', deltaX: 18, deltaY: 36,
            showDelay: 300, hideDelay: 200, showEvent: 'mouseenter',
        });
        $('.designer-step-icon').bind('mouseover', function (event) {
            let tool = $(this).find('.designer-step-tool');
            tool.tooltip('show');
            tool.tooltip('tip').hover(function () {
                tool.tooltip('show')
            }, function () {
                tool.tooltip('hide')
            })
        }).bind('mouseleave', function (event) {
            let tool = $(this).find('.designer-step-tool');
            tool.delay(1000).tooltip('hide');
        });
    }
    // tooltipInit();

</script>
<!--editor-opt-->
<!--
        <div style="">
            <div class="designer-editor-opt">
                <div class="designer-editor-opt-title">test001</div>
                <div class="designer-editor-opt-main">
                    <span class="designer-editor-opt-btn">
                        <span class="designer-editor-opt-btn-icon designer-editor-opt-from"></span>
                    </span>
                    <span class="designer-editor-opt-btn">
                        <span class="designer-editor-opt-btn-icon designer-editor-opt-edit"></span>
                    </span>
                    <span class="designer-editor-opt-btn">
                        <span class="designer-editor-opt-btn-icon designer-editor-opt-setting"></span>
                    </span>
                    <span class="designer-editor-opt-btn">
                        <span class="designer-editor-opt-btn-icon designer-editor-opt-to"></span>
                    </span>
                </div>
            </div>
        </div>
-->

<!---->

</html>
